<template>
	<view>
		<cu-custom bgColor="bg-blue" backUrl="/pages/index/index" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我发起的</block>
		</cu-custom>
		<view  :style="[{top:CustomBar + 'px'}]">
<!-- 		<view class="cu-bar search">
			<view class="search-form bg-white round">
				<text class="cuIcon-search"></text>
				<input type="text"  placeholder="搜索" v-model="inputForm" confirm-type="search" @input="inputWord"></input>
			</view>
		</view> -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(row, index) in list" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove"  @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view @click="toDetail(row)" class="content">
								<view class="text-bold text-grey">
									<view class="ellipsis-description">
										{{inputForm.name}} 在 {{row.addTime}}发起的【申请加分】
									</view>
								</view>
						</view>
						<view @click="toDetail(row)" class="action">
							<!-- <view class="text-grey text-xs" > {{row.updateDate}}</view> -->
							<view class="text-red text-xs" v-if="row.addState === '未通过'">
								 {{row.addState}}
							</view>
							<view class="text-orange  text-xs"  v-if="row.addState === '未审核'">
								 {{row.addState}}
							</view>
							<view class=" text-green text-xs"  v-if="row.addState === '已通过'">
								 {{row.addState}}
							</view>
				
						</view>	  
						<view class="move" >
							<view class="bg-blue" @click="toDetail(row)">详情</view>
						</view>
				</view>
		
			</view>
		</mescroll-body>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	// import pick from 'lodash.pick'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				inputForm: {
					id: '',
					name: '', // 姓名
					institute: '', // 学院
					grade: '', // 年级
					classe: '', // 班级
					studentId: '' // 学号
				},
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						tip: '~ 搜索无结果 ~' // 提示
					}
				},
				CustomBar: this.CustomBar,
				list: [], // 数据列表
				modalName: null,
				curWord:"" //当前搜索关键词
			}
		},
		computed: mapState({
			 userInfo: (state) => state.user.userInfo
		  }),
		methods: {
			pullUser(){
				this.inputForm.name = this.userInfo.name
				this.inputForm.institute = this.userInfo.office.name
				this.inputForm.grade = this.userInfo.grade
				this.inputForm.classe = this.userInfo.classn
				this.inputForm.studentId = this.userInfo.no
			},
			refreshList(){
				this.pullUser()
				this.$http.get('/moredumain/studentMoreduMain/list',this.inputForm).then(({data})=>{
					if (data && data.success) {
						this.inputForm.id = data.page.list[0].id
						this.detail(this.inputForm.id)
					}
				})
			},
			//获取详细信息
			detail (row) {
			  this.$http.get(`/moredumain/studentMoreduMain/queryById?id=` + row).then(({data}) => {
				  this.list = data.studentMoreduMain.studentMoreduViceAddList
				  this.list.map(item => {
				  	item.addState = this.$dictUtils.getDictLabel("audit_status", item.addState, '-')
				  })
				  console.log(this.list)
					  this.mescroll.endBySize(this.list.length)
			  })
			},
			// 输入监听
			// inputWord(e){
			// 	// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
			// 	// 节流,避免输入过快多次请求
			// 	this.searchTimer && clearTimeout(this.searchTimer)
			// 	this.searchTimer = setTimeout(()=>{
			// 		this.doSearch(this.curWord)
			// 	},300)
			// },
			// 搜索
			// doSearch(word){
			// 	this.curWord = word
			// 	this.list = []; // 先清空列表,显示加载进度
			// 	this.mescroll.resetUpScroll();
			// },
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.refreshList()
			},
			toDetail (row) {
				uni.navigateTo({
					url: '/subPages/task/TaskFormDetail?flow=' + JSON.stringify(row)
				})
			  },
	
			
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > -60? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.ellipsis-description {
		  font-size: 12px;
		  line-height: $line-height-base;
		  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
		  -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
		  overflow: hidden; /*超出的文本隐藏*/
		  text-overflow: ellipsis; /* 溢出用省略号*/
		   -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 29px;
		width: calc(100% - 77px);
		line-height: 1.6em;
	}

	.cu-bar .search-form{
		background-color: white;
	}
	.cu-list>.cu-item .move {
	    width: 240px;
	}
	.cu-list>.cu-item.move-cur {
	    -webkit-transform: translateX(-240px);
	    transform: translateX(-240px);
	}
</style>
